<div class="role-edit-container" [@fadeIn]>
  <div class="card">
    <div class="card-header">
      <h5>创建/编辑后端接口权限</h5>
    </div>
    <div class="card-body">
      <form role="form" #roleInfoForm="ngForm" novalidate>
        <div class="row mb-3">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">API 名称：</label>
          <div class="col-md-10">
            <input name="apiName" [(ngModel)]="apiPermission.apiName" #apiName="ngModel" type="text"
              class="form-control" [ngClass]="{ 'is-invalid': !apiName.valid }" placeholder="请输入 API 名称" required
              minlength="2" maxlength="64" />
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">API 接口 URL：</label>
          <div class="col-md-10">
            <input name="url" [(ngModel)]="apiPermission.url" #url="ngModel" type="text" class="form-control"
              [ngClass]="{ 'is-invalid': !url.valid }" placeholder="请输入 URL" maxlength="1024" />
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">权限通配符：</label>
          <div class="col-md-10">
            <input name="permission" [(ngModel)]="apiPermission.permission" #permission="ngModel" type="text"
              class="form-control" [ngClass]="{ 'is-invalid': !permission.valid }" placeholder="请输入权限通配符" required=""
              minlength="1" maxlength="512" />
            <p class="bg-info">
              Apache Shiro 通配符权限文档： https://shiro.apache.org/permissions.html
            </p>
          </div>
        </div>
        <div class="row mb-3 align-items-center">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">创建时间：</label>
          <div class="col-md-10">
            {{apiPermission.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}
          </div>
        </div>
        <div class="row mb-3 align-items-center">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">更新时间：</label>
          <div class="col-md-10">
            {{apiPermission.updateTime | date: 'yyyy-MM-dd HH:mm:ss'}}
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-md-2 col-form-label d-flex justify-content-end  pe-3">简介：</label>
          <div class="col-md-10">
            <textarea name="remark" [(ngModel)]="apiPermission.remark" #remark="ngModel" rows="5" class="form-control"
              [ngClass]="{ 'is-invalid': !remark.valid }" placeholder="简介" maxlength="1024"></textarea>
          </div>
        </div>
        <div class="row mb-3">
          <div class="offset-md-2 col-md-10">
            <button type="submit" class="btn btn-primary btn-margin-1rem" (click)="save()">
              保存
            </button>
            <button type="button" class="btn btn-secondary" (click)="cancel()">
              取消
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>